import React, { useState, useEffect } from 'react'
import { InputNumber } from 'antd'
import './style.scss'
import UdTreeSelect from '@/components/UdFormControls/UdTreeSelect'

function QuotaLimitItem(props) {
  const { data: detail, transportData, canDelete, removeFormulaHandle, matClassList = [], lineNo } = props
  // const [monthBeforeNum, setMonthBeforeNum] = useState(undefined)
  // const [multiple, setMultiple] = useState(undefined)
  // const [productGroupId, setProductGroupId] = useState(undefined)
  // const [detail, setDetail] = useState({monthBeforeNum: undefined, multiple: undefined, productGroupId: ''})

  // useEffect(() => {
  //   console.log(data)
  //   setDetail(data)
  // }, [data])

  const changeData = (key, value) => {
    const detailData = { ...detail }
    detailData[key] = value
    // setDetail(detailData)
    transportData(detailData)
  }
  return (
    <div className='quota-limit-item'>
      <div className="limit-item-label"><label>{lineNo}</label></div>
      <div className="limit-item-wrap">
        前 <InputNumber value={detail.monthBeforeNum} onChange={(value) => changeData('monthBeforeNum', value)} precision={0} min={1} max={12} placeholder='请输入整数' /> 个月滚动月均动销量 
        X <InputNumber value={detail.multiple} onChange={(value) => changeData('multiple', value)} precision={1} placeholder='请输入倍数' /> 倍 - 月末总库存（含在途）&nbsp;&nbsp;&nbsp;&nbsp;
        适用配额物料分类 <UdTreeSelect className="select-mat-class" value={detail.productGroupId} onChange={(value) => changeData('productGroupId', value)} treeData={matClassList} treeCheckable={true} treeDefaultExpandAll={true} maxTagCount={1} dropdownStyle={{maxHeight: 400}} />
        <div className="opt-column">
          {canDelete && <span className="formula-btn delete" onClick={removeFormulaHandle}>- 移除公式</span>}
        </div>
      </div>
    </div>
  )
}

export default React.memo(QuotaLimitItem)
